<template>
  <div class="page1">
    <Row class="listTop">
      <Col span="7">
        <div class="leftTop newtop" ref="myheight">
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>
          <div class="left1">
            <Carousel
              :autoplay="true"
              autoplay-speed="5000"
              :radiusDot="true"
              v-model="value3"
            >
              <CarouselItem>
                <div
                  class="newtitle flex flex-row justify-between items-center"
                  style="position: relative;"
                >
                  <div class="title_n flex flex-row items-center">
                    <span class="shux"></span>
                    <span class="shux_z">{{ newdata.new7.name }}</span>
                  </div>
                  <div class="switchButton">
                    <a
                      :class="newindex7 == 0 ? 'active' : ''"
                      @click="handleSelect1(0)"
                      >周</a
                    >
                    <a
                      :class="newindex7 == 1 ? 'active' : ''"
                      @click="handleSelect1(1)"
                      >月</a
                    >
                  </div>
                </div>
                <div
                  class="let1"
                  style="width: 100%;"
                  :style="{ height: heightnew + 'px' }"
                >
                  <zh-chart2
                    ref="chart8"
                    :config="newdata.new7.data[newindex7]"
                  ></zh-chart2>
                </div>
              </CarouselItem>
              <CarouselItem>
                <div
                  class="newtitle flex flex-row justify-between items-center"
                  style="position: relative;"
                >
                  <div class="title_n flex flex-row items-center">
                    <span class="shux"></span>
                    <span class="shux_z">{{ newdata.new10.name }}</span>
                  </div>
                  <div class="switchButton">
                    <a
                      :class="newindex10 == 0 ? 'active' : ''"
                      @click="handleSelect10(0)"
                      >周</a
                    >
                    <a
                      :class="newindex10 == 1 ? 'active' : ''"
                      @click="handleSelect10(1)"
                      >月</a
                    >
                  </div>
                </div>
                <div
                  class="let1"
                  style="width: 100%;"
                  :style="{ height: heightnew + 'px' }"
                >
                  <zh-chart3
                    ref="chart10"
                    :config="newdata.new10.data[newindex10]"
                  ></zh-chart3>
                </div>
              </CarouselItem>
            </Carousel>
            <!-- <zh-chart2
              ref="chart8"
              :config="newdata.new7.data[newindex7]"
            ></zh-chart2> -->
            <!-- <div class="newtitle flex flex-row justify-between items-center">
              <div class="title_n flex flex-row items-center">
                <span class="shux"></span>
                <span class="shux_z">{{ newdata.new7.name }}</span>
              </div>
              <div class="switchButton">
                <a
                  :class="newindex7 == 0 ? 'active' : ''"
                  @click="handleSelect1(0)"
                  >周</a
                >
                <a
                  :class="newindex7 == 1 ? 'active' : ''"
                  @click="handleSelect1(1)"
                  >月</a
                >
              </div>
            </div>

            <zh-chart2
              ref="chart8"
              :config="newdata.new7.data[newindex7]"
            ></zh-chart2> -->
          </div>
        </div>

        <div class="leftTop" style="margin-top: 2.5%;">
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>

          <div class="left1">
            <div class="newtitle flex flex-row justify-between items-center">
              <div class="title_n flex flex-row items-center">
                <span class="shux"></span>
                <span class="shux_z">{{ newdata.new1.name }}</span>
              </div>
              <div class="switchButton">
                <a
                  :class="new1index == 0 ? 'active' : ''"
                  @click="handleSelect(0)"
                  >周</a
                >
                <a
                  :class="new1index == 1 ? 'active' : ''"
                  @click="handleSelect(1)"
                  >月</a
                >
              </div>
            </div>
            <bar-chart
              ref="chart1"
              id="left_3"
              :config="newdata.new1.data[new1index]"
            ></bar-chart>
          </div>
          <!-- <div class="left1">
            <div class="newtitle flex flex-row justify-between items-center">
              <div class="title_n flex flex-row items-center">
                <span class="shux"></span>
                <span class="shux_z">{{ newdata.new1.name }}</span>
              </div>
            </div>
            <div class="chart-68">
              <area-chart
                ref="chart2"
                id="left_1"
                :select-range-date="selectRangeDate"
                :config="newdata.new2.data[0]"
              ></area-chart>
            </div>
          </div> -->
        </div>
      </Col>
      <Col span="10">
        <div
          class="newtitle flex flex-row justify-center items-center"
          style="width: 100%;"
        >
          <div
            class="title_n flex flex-row items-center justify-center "
            style="margin: 20px auto ;background-color: rgba(6,76,113,0.6);width: 250px;border-radius: 40px;padding: 10px 0;"
          >
            <i
              class="iconfont icon-navicon-ctgl"
              style="font-size: 32px;color: #66ffc2;"
            ></i>
            <span class="shux_z" style="font-weight: 1000;font-size: 24px;">{{
              newdata.new3.name
            }}</span>
          </div>
        </div>
        <paopao ref="chart3" :config="newdata.new3.data"></paopao>
      </Col>
      <Col span="7">
        <div class="rightTop-1">
          <div class="newtitle flex flex-row justify-between items-center">
            <div
              class="title_n flex flex-row items-center"
              style="margin: 10px 10px 0 10px ;"
            >
              <span class="shux"></span>
              <span class="shux_z">{{ newdata.new9[0].name }}</span>
            </div>
          </div>
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>
          <div
            style="width: 85%;margin-left: 7.5%;"
            class=" flex flex-row justify-between items-center flex-wrap"
          >
            <div
              class="new_fen flex flex-row justify-center items-center"
              v-for="(item, index) in newdata.new9[0].data"
              :key="index"
              style="width: 46%;padding:2%; margin-top:4%; background-color: rgba(1, 107, 108, 0.3);border: 1px solid #124f36;"
            >
              <div class="name" style="width: 20%; color: #ffffff;">
                {{ item.type }}
              </div>
              <div class="info flex flex-col justify-start items-start">
                <span style="font-size: 28px; color:#66ffc2"
                  >{{ item.num
                  }}<span style="font-size: 14px;">人次</span></span
                >
                <span v-if="index != 3" style="font-size: 14px; color:#d1d1d1"
                  >人均{{ item.price }}元</span
                >
                <span v-else style="font-size: 14px; color:#d1d1d1"
                  >总金额{{ item.price }}元</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="rightTop-2">
          <div class="newtitle flex flex-row justify-between items-center">
            <div
              class="title_n flex flex-row items-center"
              style="margin: 10px 10px 0 10px ;"
            >
              <span class="shux"></span>
              <span class="shux_z">{{ newdata.new5.name }}</span>
            </div>
          </div>
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>
          <div class="rightTop-list">
            <div class="list">
              <ring ref="chart5" :data="newdata.new5.data"></ring>
            </div>
          </div>
        </div>
      </Col>
    </Row>
    <Row class="listBottom flex flex-row justify-between ">
      <Col span="7">
        <div class="content">
          <div class="newtitle flex flex-row justify-between items-center">
            <div
              class="title_n flex flex-row items-center"
              style="margin: 10px 10px 0 10px ;"
            >
              <span class="shux"></span>
              <span class="shux_z">{{ newdata.new6.name }}</span>
            </div>
          </div>
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>

          <div class="body-right">
            <div
              class="otherContents flex flex-row justify-between items-center"
            >
              <span class="pointIndex" style="width:23%">{{
                newdata.new6.xdata[0]
              }}</span>
              <span class="pointIndex " style="width:20%;text-align: center;">{{
                newdata.new6.xdata[1]
              }}</span>
              <span class="pointIndex" style="width:19%;text-align: center;">{{
                newdata.new6.xdata[2]
              }}</span>
              <span class="pointIndex" style="width:19%;text-align: center;">{{
                newdata.new6.xdata[3]
              }}</span>
              <span class="pointIndex" style="width:19%;text-align: center;">{{
                newdata.new6.xdata[4]
              }}</span>
            </div>
            <div class="body-right-table">
              <vue-seamless-scroll
                :data="newdata.new6.tableData"
                class="seamless-warp"
              >
                <ul class="item">
                  <li
                    class="flex flex-row justify-between items-center w100 bg"
                    v-for="(item, index) in newdata.new6.tableData"
                    :key="index"
                  >
                    <div class="title1" style="width:23%">
                      {{ item.name }}
                    </div>
                    <div
                      class="title1 title_zong"
                      style="width:20%;text-align: center;"
                    >
                      {{ item.gg }}
                    </div>
                    <div class="title1 " style="width:19%;text-align: center;">
                      {{ item.dw }}
                    </div>
                    <div class="title1 " style="width:19%; text-align: center;">
                      {{ item.price }}
                    </div>
                    <div class="title1 " style="width:19%;text-align: center;">
                      {{ item.money }}
                    </div>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
      </Col>
      <Col span="10">
        <div
          class="content"
          style="width: 95%;margin:0 2.5%;height: 80%;border-color: rgb(31, 62, 125); "
        >
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>
          <div class="newtitle flex flex-row justify-between items-center">
            <div
              class="title_n flex flex-row items-center"
              style="margin: 10px 10px 0 10px ;"
            >
              <span class="shux"></span>
              <span class="shux_z">{{ newdata.new4.name }}</span>
            </div>
          </div>

          <area-chart
            ref="chart2"
            id="left_1"
            :select-range-date="selectRangeDate"
            :config="newdata.new4"
          ></area-chart>
        </div>
      </Col>

      <Col span="7">
        <div class="content">
          <span class="angle1"></span>
          <span class="angle2"></span>
          <span class="angle3"></span>
          <span class="angle4"></span>
          <div class="appUse">
            <Carousel :radiusDot="false" v-model="value2" loop>
              <CarouselItem
                v-for="(item, index) in newdata.new8.data[0]"
                :key="index"
              >
                <div class="demo-carousel">
                  <div
                    class="newtitle flex flex-row justify-between items-center"
                  >
                    <div
                      class="title_n flex flex-row items-center"
                      style="margin: 10px 10px 0 10px ;"
                    >
                      <span class="shux"></span>
                      <span class="shux_z">{{ item.name }}</span>
                    </div>
                  </div>
                  <ul>
                    <li
                      class="w100 flex flex-row justify-between items-center"
                      v-for="(item1, index1) in item.ph"
                      :key="index1"
                    >
                      <div class="flex flex-row qianbi">
                        <div class="arrow">
                          {{ index1 + 1 }}
                        </div>
                        <div class="name">{{ item1.name }}</div>
                      </div>

                      <div class="progress">
                        <div
                          class="pr"
                          :style="{ width: item1.salem / 100 + '%' }"
                        ></div>
                      </div>
                      <div class="progress2">{{ item1.salem }}</div>
                      <div class="progress1">{{ item1.fs }}份</div>
                    </li>
                  </ul>
                </div>
              </CarouselItem>
            </Carousel>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";
const barChart = () => import("./components/page1/barChart.vue");
//const radarPart = () => import("./components/page1/radarPart.vue");
//const doubleArea = () => import("./components/page1/doubleArea.vue");
//const webBar = () => import("./components/page1/webBar.vue");
//const pie = () => import("./components/pie");
//const worldMap = () => import("./components/page1/worldMap");
const ring = () => import("./components/ring");
//const popularBar = () => import("./components/page1/popularBar");
//const lines = () => import("./components/page1/lines");
//const pieRing = () => import("./components/page1/pieRing");
//const colorsBar = () => import("./components/page1/colorsBar");
//const funnel = () => import("./components/page1/funnel");
//const lineBar = () => import("./components/page1/lineBar");
const areaChart = () => import("./components/areaChart");
const paopao = () => import("./components/paopao");

//const zhChart = () => import("./components/page1/zhChart");
const zhChart2 = () => import("./components/page1/zhChart2");
const zhChart3 = () => import("./components/page1/zhChart3");
export default {
  name: "page1",
  props: {
    selectRangeDate: Array,
  },
  components: {
    paopao,
    barChart,
    // radarPart, // 中心
    // doubleArea, // 面积图
    // webBar, // 柱图
    // pie, // 饼图
    // worldMap, // 世界地图
    ring, // 圆环
    //  popularBar, // 柱图
    //lines, //折线图
    //pieRing, // 饼环图
    // colorsBar, // 柱图
    // funnel, // 漏斗图
    //lineBar, //柱图
    areaChart,
    // zhChart, // 面积图
    zhChart2, // 面积图
    zhChart3, // 面积图
  },
  data() {
    return {
      heightnew: 0,
      new9: {
        name: "本周人均就餐金额",
        data: [
          {
            type: "早餐",
            num: 616,
            price: "5.28",
          },
          {
            type: "午餐",
            num: 616,
            price: "12.96",
          },
          {
            type: "晚餐",
            num: 616,
            price: "11.67",
          },
          {
            type: "餐券",
            num: 594,
            price: "19.58",
          },
        ],
      },
      newindex10: 0,
      newindex7: 0,
      new1index: 0,
      intervalId: null,
      newdata: {},

      step: 1, // 数值越大速度滚动越快
      limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 1000, // 单步运动停止的时间(默认值1000ms)

      value2: 0,
      value3: 0,

      resizeFn: null,
    };
  },
  methods: {
    handleSelect1(e) {
      this.newindex7 = e;
      console.log(this.newindex7);
      this.$forceUpdate;
      setTimeout(() => {
        this.$refs.chart8.setChart1();
      }, 100);
    },
    handleSelect10(e) {
      this.newindex10 = e;
      console.log(this.newindex10);
      this.$forceUpdate;
      setTimeout(() => {
        this.$refs.chart10.setChart1();
      }, 100);
    },
    handleSelect(e) {
      this.new1index = e;
      this.$forceUpdate;
      setTimeout(() => {
        this.$refs.chart1.setChart();
      }, 100);
    },
    getnewdata() {
      axios
        .get("/api/index")
        .then((response) => {
          console.log(response);
          this.newdata = response.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getnewdata2() {
      axios
        .get("/api/index")
        .then((response) => {
          console.log(response);
          this.newdata = response.data.data;
          this.$refs.chart8.setChart1();
          for (let i = 1; i < 18; i++) {
            this.$refs["chart" + i].setChart();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  watch: {
    selectRangeDate: function() {
      for (let i = 1; i < 18; i++) {
        this.$refs["chart" + i].setChart();
      }
    },
  },
  mounted() {
    this.resizeFn = this.$debounce(() => {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      for (let i = 1; i < 18; i++) {
        this.$refs["chart" + i].setChart();
      }
    }, 500);
    window.addEventListener("resize", this.resizeFn);
    this.heightnew = window.innerHeight * 0.25;
    if (this.heightnew > 0) {
      setTimeout(() => {
        this.$refs.chart8.setChart();
        this.$refs.chart10.setChart();
      }, 100);
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeFn);
    clearInterval(this.intervalId);
  },
  created() {
    this.getnewdata();
    this.intervalId = setInterval(this.getnewdata2, 30000);
  },
};
</script>

<style lang="less">
.appUse .ivu-carousel-arrow {
  display: none !important;
}
.appUse .ivu-carousel-dots-inside {
  display: none;
}
.left1 .ivu-carousel-dots-inside {
  display: none;
}
.left1 .carousel .slide {
  transition: transform 8s ease;
}
.bg {
  width: 100%;
}
.body-right {
  width: 95%;
  margin: 10px 2.5%;
  position: relative;
  color: #333333;
  font-weight: bold;
  font-size: 12px;
  .otherContents {
    color: #fff;

    background-color: rgba(117, 222, 239, 0.1);
    width: 100%;
    height: 40px;
    padding: 0 20px;
    .pointIndex {
      text-align: left;
    }
  }
  .body-right-table {
    .seamless-warp {
      height: 100%;
      overflow: hidden;
      ul li {
        list-style: none;
        width: 100%;
        margin-left: -2.5%;
        padding: 10px 20px;
        box-sizing: border-box;
        color: #fff;
        margin: 0;
      }
      ul li:nth-child(2n) {
        background-color: rgba(117, 222, 239, 0.06);
      }
      .title_zong {
        width: 70px;
      }
      .title1 {
        text-align: left;
      }
      .item {
      }
    }
  }
}
.qianbi {
  .name {
    margin-left: 20px;
    color: #ffffff;
    width: 70px;
  }
}
ul li {
  widows: 90%;
  margin: 20px 5%;
  margin-top: 20px;
  .progress2 {
    color: #fff;
  }
  .progress1 {
    color: #07e8ae;
  }
  .progress {
    position: relative;
    margin: 0 10px;
    background: rgba(11, 87, 137, 0.2);
    height: 10px;
    border-radius: 50px;
    width: 50%;
    overflow: hidden;
    .pr {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(35, 145, 255, 1);
      height: 100%;
    }
  }
}
.arrow {
  position: relative;
  width: 15px;
  height: 20px;
  border-radius: 4px 0 0 4px;
  background-color: #2391ff;
  color: #fff;
  display: flex;
  justify-content: center;
  padding-left: 5px;
  align-items: center;
}

.arrow::before {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid #2391ff;
  border-bottom: 10px solid transparent;
}
ul li:nth-child(2) .arrow {
  background: rgb(255, 152, 0) !important;
}
ul li:nth-child(2) .arrow::before {
  border-left: 10px solid rgb(255, 152, 0) !important;
  //background: rgb(255, 152, 0) !important;
}
ul li:nth-child(1) .arrow {
  background: rgb(255, 50, 50) !important;
}
ul li:nth-child(1) .arrow::before {
  border-left: 10px solid rgb(255, 50, 50) !important;
  //background: rgb(255, 152, 0) !important;
}
ul li:nth-child(3) .arrow {
  background: rgb(255, 210, 0) !important;
}
ul li:nth-child(3) .arrow::before {
  border-left: 10px solid rgb(255, 210, 0) !important;
  //background: rgb(255, 152, 0) !important;
}
.newtitle {
  width: 300px;
  display: inline;
  .shux {
    width: 5px;
    height: 20px;
    background: #028bff;
  }
  .shux_z {
    color: #fff;
    font-size: 16px;
    margin-left: 10px;
  }
}
.switchButton {
  position: absolute;
  z-index: 5;
  right: 10px;
  top: 15px;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 0;

  .active {
    background: rgba(255, 255, 255, 0.2);
  }

  a {
    display: inline-block;
    color: #fff;
    padding: 1px 8px;
  }
}
.page1 {
  height: 100%;
  width: 100%;
  padding: 0px 20px 20px;

  overflow: hidden;
  .chart-68 {
    width: 100%;
    height: 100%;
    float: left;
  }
  .listTop {
    width: 100%;
    height: 60%;
    position: relative;
    .ivu-col {
      height: 100%;

      .leftTop {
        width: 100%;
        height: 49%;
        border: 1px solid #0e2a61;
        position: relative;
        background: rgba(6, 37, 58, 0.5);
        padding: 10px;

        .left1 {
          width: 100%;
          height: 100%;
        }

        .left2,
        .left3 {
          width: 100%;
          height: 30%;
          padding: 10px 0;
        }
      }

      .rightTop-1 {
        width: 100%;
        height: 52.5%;
        border: 1px solid #0d2451;
        position: relative;
      }

      .rightTop-2 {
        width: 100%;
        margin-top: 2.5%;
        height: 45%;
        border: 1px solid #0d2451;
        position: relative;

        .rightTop-list {
          width: 100%;
          height: 100%;

          .list {
            width: 100%;
            height: 100%;
            float: left;
          }
        }
      }
    }
  }

  .listBottom {
    height: 53%;

    .ivu-col-span-9 {
      width: 33.5%;
      margin-right: 0.6667%;
    }

    .ivu-col-span-4 {
      width: 17.66667%;
      margin-right: 0.6667%;
    }

    .ivu-col {
      height: 100%;

      .content {
        margin-top: 2.5%;
        height: calc(~"100% - 100px");
        border: 1px solid #0d2451;
        position: relative;

        .ivu-row {
          &.topLine {
            height: 55%;
          }

          &.bottomPie {
            height: 45%;
          }

          .ivu-col {
            height: 100%;

            .charts-list {
              height: 100%;
              width: 100%;
            }
          }
        }

        .behavior {
          width: 100%;
          height: 100%;
        }

        .appUse {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
